<!--
 * @Author: your name
 * @Date: 2021-04-17 17:01:50
 * @LastEditTime: 2021-04-20 08:14:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \智慧医疗项目\patient-app\src\views\pages\docList.vue
-->
<template>
  <div class="docList">
    <div class="header">
      <div class="top">
        <span @click="$router.push('/home/question')">&lt;</span>
        <span>快速问诊</span>
        <span>消息</span>
      </div>
      <div class="search">
        <input type="text" placeholder="请输入医院或科室或医生" v-model="val" @input="search($event)" />
      </div>
    </div>
    <div class="main">
      <div class="select">
        <span>全部科室</span>
        <span>全国</span>
      </div>
      <div class="content">
        <li v-for="item in renderList.length>0?renderList:$store.state.doctor.docList" :key="item.id">
          <dl>
            <dt>
              <img :src="item.imgUrl" alt="">
              <span class="office">{{item.office}}</span>
            </dt>
            <dd>
              <div class="province">
                <h3 class="name">{{item.hospital}}</h3>
                <p>
                  <span class="zhu">主任医师</span>
                  <span class="focus">关注</span>
                </p>
              </div>
              <p>{{item.name}}</p>
              <p class="type"><span v-for="(items, index) in item.type" :key="index">{{items}}</span></p>
            </dd>
          </dl>
          <p class="p1"><span>好评率<b>{{item.rate}}%</b></span><span>服务人次<b>{{item.count}}</b></span></p>
          <div class="consult">
            <p class="p2">￥<span>{{item.price}}</span><b>元</b></p>
            <span :class="item.isFull===5?'full':'unfull'" @click="item.isFull===5?'consult':''">{{item.isFull===5?'当前问诊已满请等待':'咨询'}}</span>
          </div>
        </li>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import debounce from '../../utils/debounce'
export default {
  data() {
    return {
     val: '',
     renderList: [],
    }
  },
  mounted() {
    this.getDocList()
  },
  commputed: {
  },
  methods: {
    ...mapActions(['getDocList']),
    search(e) {
      debounce(this.changeVal(e), 3000)
    },
    changeVal(e) {
      this.val = e.target.value
      this.renderList = e.target&&this.$store.state.doctor.docList.filter(item => item.name.includes(e.target.value)||item.hospital.includes(e.target.value)||item.office.includes(e.target.value))
      console.log(this.renderList)
    },
    consult() {
      this.$router.push('/pay')
    }
  }
};
</script>

<style lang='scss' scoped>
.docList {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
}
.header {
  width: 100%;
  height: 80px;
  background-color: #4483ec;
  .top {
    width: 100%;
    height: 40px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;
  }
  .search {
    width: 100%;
    height: 40px;
    padding: 8px 14px;
    input {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      color: #fff;
      background-color: #a3c5ff;
      border-radius: 20px;
      text-align: center;
      font-size: 13px;
    }
  }
}

.main {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  background-color: #eee;
  .select {
    width: 100%;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    padding: 0 14px;
    span {
      font-size: 15px;
      margin-right: 40px;

      display: inline-block;
      position: relative;
    }
    span::after {
      content: '';
      position: absolute;
      top: 50%;
      right: -10px;
      border-right:4px solid transparent;
      border-left:4px solid transparent;
      border-top:4px solid #777;
    }
  }
  .content {
    width: 100%;
    padding: 0 14px;
    li {
      background-color: #fff;
      border-radius: 15px;
      margin-bottom: 14px;
      padding: 16px 0;
      dl {
        width: 100%;
        height: 90px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        dt {
          width: 90px;
          height: 90px;
          position: relative;
          padding: 10px;
          .office {
            background-color: orange;
            color: #fff;
            padding: 1px 6px;
            border-radius: 15px;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
          }
        }
        img {
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 50%;
        }
        dd {
          flex: 1;
          margin-left: 20px;
          .province {
            height: 40px;
            width: 100%;
            display: flex;
            align-items: center;
            p {
              line-height: 40px;
            }
          }
          .name {
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          span.zhu {
            font-weight: normal;
            font-size: 12px;
            background-color: #b8d1e6;
            color: steelblue;
            padding: 1px 6px;
            margin: 0 9px;
          }
          span.focus {
            border: 1px solid steelblue;
            padding: 1px 6px;
            font-size: 12px;
            color: steelblue;
            font-weight: normal;
          }
          .type {
            position: absolute;
            right: 14px;
            top: 55px;
            span {
              font-size: 12px;
              background-color: #f0d8da;
              padding: 1px 6px;
              color: brown;
              margin: 0 2px;
            }
          }
        }
      }
      .p1 {
        width: 100%;
        height: 38px;
        color: #666;
        display: flex;
        line-height: 38px;
        padding: 0 14px;
        span {
          padding: 0 5px;
          font-size: 12px;
        }
        b {
          color: brown;
          font-size: 15px;
          font-weight: normal;
          padding: 0 3px;
        }
      }
      .consult {
        width: 100%;
        height: 44px;
        display: flex;
        justify-content: space-between;
        padding: 0 14px;
        align-items: center;
      }
      .unfull {
        padding: 2px 7px;
        border-radius: 20px;
        background-color: steelblue;
        color: #fff;
        font-size: 13px;
      }
      .full {
        color: steelblue;
        font-size: 14px;
      }
      .p2 {
        font-size: 12px;
        color: brown;
        span {
          font-size: 15px;
        }
        b {
            color: #333;
            padding: 0 3px;
        }
      }
    }
  }
}
</style>